<template>
    <div class="stepBox">
        <el-button type="primary">流程预览</el-button>
        <el-steps :active="stepContent.length" align-center direction="vertical" :space="80">
            <el-step v-for="(item, index) in stepContent" :key="index" :title="item.title" :description="item.description">
                <template #icon>
                    <span class="spanIcon"></span>
                </template>
            </el-step>
        </el-steps>
    </div>
</template>

<script>
    import api from "@/api"
    import {ElMessage } from 'element-plus';
    import { LocalStorage } from '@/utils/storage';
    export default {
        // props: ['stepContent', active],
        data() {
            return {
                stepContent: [
                    // {
                    //     title: 'Event start',
                    //     description: '2018-04-15',
                    // },
                ],
                bsType: ['A003001', 'A003002', 'A003003', 'A003004', 'A003005'],
                bsId: null
            }
        },
        created() {
            this.bsId = this.$route.query.id;
            this.loadData();
        },
        mounted(){
            
        },
        methods: {
            loadData() {
                var ind = LocalStorage.get('system') - 1;
                api.manager.stepsData({
                    pageNum: 1,
                    pageSize: 100,
                    bs_type: this.bsType[ind],
                    bs_id: this.bsId,
                }).then(res => {
                    if(res.code == 200) {
                        res.rows.forEach(item => {
                            this.stepContent.push({title: item.status_name, description: item.pcreateTime})
                        })
                    }
                    console.log('res', res)
                }).catch(err => {
                    ElMessage({
                        type: 'error',
                        message: err.msg
                    })
                })
            }
        }

    }
</script>

<style lang="less" scoped>
    .stepBox {
        padding: 20px;
        .el-button {
            margin: 20px 0;
        }
        :deep(.el-steps) {
            .el-step__icon {
                .spanIcon {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .is-finish {
                .spanIcon {
                    background: var(--el-color-primary);
                }
            }
            .is-process {
                .spanIcon {
                    background: var(--el-text-color-primary);;
                }
            }
            .is-wait {
                .spanIcon {
                    background: var(--el-text-color-placeholder);
                }
            }

        }
    }
</style>
